// 商品API端点
const apiEndpoint = '/products';

// 获取商品列表
function fetchProducts() {
    fetch(apiEndpoint)
        .then(response => response.json())
        .then(products => {
            renderProducts(products);
        })
        .catch(error => console.error('Error fetching products:', error));
}

// 渲染商品列表
function renderProducts(products) {
    const productListElement = document.getElementById('productList');
    productListElement.innerHTML = products.map(product => `
        <div class="product">
            <h3>${product.name}</h3>
            <p>${product.description}</p>
            <p>价格: ${product.price}</p>
            <button onclick="addToCart(${product.id})">添加到购物车</button>
        </div>
    `).join('');
}

// 添加商品到购物车
function addToCart(productId) {
    // 这里需要调用后端API来获取商品详情，或者在渲染商品列表时就获取商品的详细信息
    fetch(`${apiEndpoint}/${productId}`)
        .then(response => response.json())
        .then(product => {
            cart.push(product);
            updateCartDisplay();
            alert('商品已添加到购物车');
        })
        .catch(error => console.error('Error adding product to cart:', error));
}

// 渲染购物车
function updateCartDisplay() {
    const cartElement = document.getElementById('cart');
    cartElement.innerHTML = cart.map((item, index) => `
        <div class="cart-item">
            <h3>${item.name}</h3>
            <p>价格: ${item.price}</p>
            <button onclick="removeFromCart(${item.id})">移除</button>
        </div>
    `).join('');
}

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    fetchProducts();
});